
<template>
  <div class="Page_KnowledgeStyleBox">
    <div class="Page_KnowledgeStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_KnowledgeStyleRightBox">
      <div class="Page_KnowledgeStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_KnowledgeStyleDread">
        <a-breadcrumb style="margintop: 10px; marginleft: 20px">
          <a-breadcrumb-item><a href="/home">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item
            ><a href="/knowledge">知识小册</a></a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
      <div class="Page_KnowLedgeStyleRgba">
        <div class="Page_KnowlEDGEStyleFrom">
          <p>
            名称：<input
              type="text"
              v-model="val"
              @input="search"
              placeholder="请输入知识库名称"
            />
          </p>
          <p>
            状态：<select style="width: 170px; height: 30px" name="" id="">
              <option value="">已发布</option>
              <option value="">草稿</option>
            </select>
          </p>
          <p></p>
          <p>
            <a-button type="primary">搜索</a-button>
            &nbsp;
            <a-button>重置</a-button>
          </p>
        </div>
        <div class="Page_KnowLedgeStyImg">
          <div class="Page_KnowLedgeStyHeader">
            <p></p>
            <p></p>
            <!-- 新建弹框 -->
            <p>
              <a-button type="primary" @click="showDrawer"
                ><plus-outlined />新建</a-button
              >
              <a-drawer
                width="500px"
                v-model:visible="visible"
                class="custom-class"
                style="color: red"
                title="新建知识库"
                placement="right"
                @after-visible-change="afterVisibleChange"
              >
                <p class="aDDfROM">
                名称:<a-textarea
                    style="width:400px;"
                    v-model:value="value1"
                    auto-size
                  />
                  <div style="margin: 24px 0" />
                  描述:<a-textarea
                    style="width:400px;"
                    v-model:value="value2"
                    :auto-size="{ minRows: 2, maxRows: 5 }"
                  />
                </p>
                <p style="color:#000;">评论:<a-switch v-model:checked="checked" /></p>
               <!-- OSS上传图片 -->
                <p><FromOSS></FromOSS></p>
                <p><a-input v-model:value="value" /></p>
                <p>
                  <!-- 新建弹框二次 -->
                  <DrawerOSS></DrawerOSS>
                </p>
              </a-drawer>
            </p>
          </div>
          <!-- 卡片照片 -->
          <div class="Page_KnowLedGetStyleBox">
            <a-card
              v-for="(item, idx) in kNOWlEDGEarray"
              :key="idx"
              hoverable="true"
              size="200px"
              class="CardImgX"
            >
              <template #cover>
                <img
                  style="width: 100%; height: 200px"
                  alt="example"
                  :src="item.img"
                />
              </template>
              <template #actions>
                <setting-outlined @click="AddOSS" key="setting" />
                <edit-outlined @click="save" key="edit" />
                <ellipsis-outlined key="ellipsis" />
                <delete-outlined key="del" />
              </template>
              <a-card-meta :title="item.title" :description="item.time">
                <template #avatar>
                  <a-avatar :src="item.img" />
                </template>
              </a-card-meta>
            </a-card>
          </div>
          <div class="page">
            <a-pagination
              v-model:current="current"
              :total="50"
              show-less-items
            />
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Axios from "axios";
import { message } from "ant-design-vue";
import {
  EditOutlined,
  CloudUploadOutlined,
  SettingOutlined,
  DeleteOutlined,
  PlusOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import FromOSS from "../../ComProps/FromOSS/index.vue";
import DrawerOSS from '../../ComProps/DrawerOSS/index.vue';
import ComFromListS from "../../components/ComFromListS/index.vue";
import DrawerStyleBox from "../../components/DrawerStyleBox/index.vue";
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
import { defineComponent, ref, reactive } from "vue";
export default {
  data() {
    return {
      kNOWlEDGEarray: [],
      val: "",
      imgArray:[]
    };
  },
  beforeCreate() {},
  setup() {
    const value = ref("");
    const value1 = ref("");
    const value2 = ref("");
    const checked = ref(false);
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const validateMessages = {
      required: "${label} is required!",
      types: {
        email: "${label} is not a valid email!",
        number: "${label} is not a valid number!",
      },
      number: {
        range: "${label} must be between ${min} and ${max}",
      },
    };
    const formState = reactive({
      user: {
        name: "",
        age: undefined,
        email: "",
        website: "",
        introduction: "",
      },
    });

    const onFinish = (values) => {
      console.log("Success:", values);
    };
    const visible = ref(false);

    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    const showDrawer = () => {
      visible.value = true;
    };
    const AddOSS = () => {
      console.log(1);
      visible.value = true;
    };
    return {
      visible,
      afterVisibleChange,
      showDrawer,
      current: ref(2),
      AddOSS,
      formState,
      onFinish,
      layout,
      validateMessages,
      checked,
      value1,
      value2,
      value,
    };
  },
  created() {
    this.KnowLeDeArrayFunc();
    this.imgXMock()
  },
  methods: {
    async imgXMock(){
      let res = await Axios.post("/api/img");
      this.imgArray = res.data.data
    },
    async KnowLeDeArrayFunc() {
      let res = await Axios.get("/api/getMock");
      this.kNOWlEDGEarray = res.data.data;
    },
    Detail(id) {
      console.log(id, "id");
    },
    AddRgba() {
      //设置
    },
    save(){
     this.$router.push("/Editor")
    },
    warning() {
      message.warning("访客无权进行该操作");
    },
    confirm() {
      message.warning("访客无权进行该操作");
    },
    cancel() {
      message.error("Click on No");
    },
    async search() {
      let res = await Axios.post("/api/inputSet", { val: this.val });
      this.kNOWlEDGEarray = res.data.list;
    },
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    DrawerStyleBox,
    CloudUploadOutlined,
    SettingOutlined,
    DeleteOutlined,
    ComFromListS,
    PlusOutlined,
    EditOutlined,
    EllipsisOutlined,
    FromOSS,
    DrawerOSS,
  },
};
</script>

<style>
.Page_KnowledgeStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_KnowledgeStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_KnowledgeStyleRightBox {
  flex: 1;
}
.Page_KnowledgeStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_KnowledgeStyleDread {
  width: 100%;
  height: 40px;
}
.Page_KnowLedgeStyleRgba {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #eff2f5;
}
#IconDel {
  border-right: none;
}
.Page_KnowlEDGEStyleFrom {
  width: 96%;
  height: 150px;
  margin: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
}
.Page_KnowLedgeStyImg {
  width: 96%;
  height: auto;
  background: #fff;
  margin: 30px;
}
.Page_KnowLedGetStyleBox {
  width: 96%;
  height: 400px;
  display: flex;
  background: #fff;
}
.Page_KnowLedGetStyleBody {
  width: 100%;
  height: 449px;
  display: flex;
  flex-wrap: wrap;
}
.Page_KnowLedGetStyleBody > dl {
  width: 400px;
  height: 200px;
  flex-shrink: 0;
  margin-left: 40px;
  border: 1px solid #ccc;
}
.Page_KnowLedGetStyleBody > dl > dd {
  width: 100%;
  height: 50px;
  display: flex;
  border-top: 1px solid #ccc;
}
.Page_KnowLedGetStyleBody > dl > dd > p {
  width: 101px;
  height: 100%;
  text-align: center;
  line-height: 50px;
  border-right: 1px solid #ccc;
}
.Page_kNOWlEDgETstyleIMGx > img {
  width: 100%;
  height: 100px;
}
.Page_KnowLedgeStyHeader {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.CardImgX {
  width: 250px;
  height: 344px;
  flex-shrink: 0;
  margin: 10px;
}
.aDDfROM {
  color: #000;
}
</style>
